<template>
  <div class="wrapper">
    <transition
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__fadeInLeft"
      leave-active-class="animate__fadeOutRight"
    >
      <el-card class="card">
        <h2 style="text-align: center">注册页面</h2>

        <el-form
          :rules="rules"
          status-icon
          :model="registerForm"
          ref="registerForm"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="registerForm.name"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="registerForm.email"
              placeholder="请输入email"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="registerForm.password"
              auto-complete="new-password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input
              type="password"
              v-model="registerForm.password2"
              auto-complete="new-password"
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择身份" prop="identity">
            <el-select v-model="registerForm.identity" placeholder="请选择身份">
              <el-option label="管理员" value="manager"></el-option>
              <el-option label="员工" value="staff"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              icon="el-icon-back"
              circle
              @click="goLogin"
            ></el-button>
            <el-button
              type="primary"
              style="width: 80%"
              @click="submitForm('registerForm')"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "Register",
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        name: "",
        password: "",
        email: "",
        password2: "",
        identity: ''
      },
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "请输入6-30位", trigger: 'blur' }
        ],
        email: [{ required: true, message: "邮箱格式不正确", trigger: "blur", type: 'email' }],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "请输入6-30位", trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        identity: [{ required: true, message: "请选择身份", trigger: "blur" }]
      },
    };
  },

  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/users/register', this.registerForm)
            .then(res => {
              //注册成功
              console.log(res)
              this.$message({
                message: '账号注册成功',
                type: 'success'
              })
              this.$router.push('/login')
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goLogin () {
      this.$router.push("/login");
    },
  },
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 400px;
}
</style>